@use '../../styles/tools'
@use '../../styles/settings'
@use './variables' as *

@include tools.layer('components')
  .v-snackbar
    justify-content: center
    z-index: $snackbar-z-index
    margin: $snackbar-wrapper-margin
    margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
    padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left)

    &:not(.v-snackbar--center):not(.v-snackbar--top)
      align-items: flex-end

    &__wrapper
      align-items: center
      display: flex
      max-width: $snackbar-wrapper-max-width
      min-height: $snackbar-wrapper-min-height
      min-width: $snackbar-wrapper-min-width
      overflow: hidden
      padding: $snackbar-wrapper-padding

      @include tools.rounded($snackbar-border-radius)

      @at-root .v-snackbar
        @include tools.variant($snackbar-variants...)

      @media (forced-colors: active)
        border: thick solid

    &__content
      flex-grow: 1
      font-size: $snackbar-font-size
      font-weight: $snackbar-font-weight
      letter-spacing: $snackbar-letter-spacing
      line-height: $snackbar-line-height
      margin-right: auto
      padding: $snackbar-content-padding
      text-align: initial

    &__actions
      align-items: center
      align-self: center
      display: flex
      margin-inline-end: $snackbar-action-margin

      & > .v-btn
        padding: $snackbar-btn-padding
        min-width: auto

    &__timer
      width: 100%
      position: absolute
      top: 0

      .v-progress-linear
        transition: .2s linear

    &--absolute
      position: absolute
      z-index: $snackbar-absolute-z-index

    &--multi-line &__wrapper
      min-height: $snackbar-multi-line-wrapper-min-height

    &--vertical &__wrapper
      flex-direction: column

      .v-snackbar__actions
        align-self: flex-end
        margin-bottom: $snackbar-vertical-action-margin-bottom

    &--center
      align-items: center
      justify-content: center

    &--top
      align-items: flex-start

    &--bottom
      align-items: flex-end

    &--left,
    &--start
      justify-content: flex-start

    &--right,
    &--end
      justify-content: flex-end

@include tools.layer('transitions')
  .v-snackbar-transition
    &-enter-active,
    &-leave-active
      transition-duration: .15s
      transition-timing-function: settings.$decelerated-easing

    &-enter-active
      transition-property: opacity, transform

      @media (prefers-reduced-motion: reduce)
        transition-property: opacity

    &-enter-from
      opacity: 0
      transform: scale($snackbar-transition-scale)

    &-leave-active
      transition-property: opacity

    &-leave-to
      opacity: 0
